import React from 'react'

export interface LoadingProps {
  size?: 'sm' | 'md' | 'lg'
  type?: 'spinner' | 'dots' | 'pulse'
  text?: string
  overlay?: boolean
}

const Loading: React.FC<LoadingProps> = ({
  size = 'md',
  type = 'spinner',
  text,
  overlay = false
}) => {
  const sizeClasses = {
    sm: 'w-4 h-4',
    md: 'w-8 h-8',
    lg: 'w-12 h-12'
  }

  const textSizes = {
    sm: 'text-sm',
    md: 'text-base',
    lg: 'text-lg'
  }

  const LoadingSpinner = () => (
    <svg 
      className={`animate-spin ${sizeClasses[size]} text-blue-500`} 
      fill="none" 
      viewBox="0 0 24 24"
    >
      <circle 
        className="opacity-25" 
        cx="12" 
        cy="12" 
        r="10" 
        stroke="currentColor" 
        strokeWidth="4" 
      />
      <path 
        className="opacity-75" 
        fill="currentColor" 
        d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" 
      />
    </svg>
  )

  const LoadingDots = () => {
    const dotSize = size === 'sm' ? 'w-2 h-2' : size === 'md' ? 'w-3 h-3' : 'w-4 h-4'
    
    return (
      <div className="flex space-x-1">
        {[0, 1, 2].map((i) => (
          <div
            key={i}
            className={`${dotSize} bg-blue-500 rounded-full animate-bounce`}
            style={{
              animationDelay: `${i * 0.1}s`,
              animationDuration: '0.6s'
            }}
          />
        ))}
      </div>
    )
  }

  const LoadingPulse = () => (
    <div className={`${sizeClasses[size]} bg-blue-500 rounded-full animate-pulse`} />
  )

  const renderLoading = () => {
    switch (type) {
      case 'dots':
        return <LoadingDots />
      case 'pulse':
        return <LoadingPulse />
      default:
        return <LoadingSpinner />
    }
  }

  const LoadingContent = () => (
    <div className="flex flex-col items-center justify-center space-y-2">
      {renderLoading()}
      {text && (
        <p className={`text-gray-600 ${textSizes[size]}`}>
          {text}
        </p>
      )}
    </div>
  )

  if (overlay) {
    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
        <div className="bg-white rounded-lg p-6">
          <LoadingContent />
        </div>
      </div>
    )
  }

  return <LoadingContent />
}

export default Loading
